<template>
    <div class="release">
      <van-tabs v-model="active" type="card" animated>
        <van-tab title="视频">
          <div class="release-video">
            <van-field v-model="title" label="标题" placeholder="写下你的标题吧！" />
            <div class="release-video__upload">
              <van-uploader
                v-model="videoList"
                accept=".mp4"
                :max-count="1"
              />
            </div>
          </div>
        </van-tab>
        <van-tab title="图文">
          <div class="release-img">
            <h4>添加图片 <span class="text1-1 fs-12">(可选)</span></h4>
            <div class="release-img">
              <van-uploader v-model="imgList" multiple />
            </div>
          </div>
          <van-field v-model="title" label="标题" placeholder="写下你的标题吧！" />
          <div class="release-text">
            <h4>添加内容</h4>
            <van-field
              v-model="message"
              rows="4"
              autosize
              type="textarea"
              maxlength="500"
              placeholder="请填入文字内容~"
              show-word-limit
            />
          </div>
        </van-tab>
      </van-tabs>
      <van-cell :title="categoryTitle" is-link @click="showPicker = true" />
      <van-popup v-model="showPicker" position="bottom">
        <van-tree-select
          :items="columns"
          :active-id.sync="activeId"
          :main-active-index.sync="activeIndex"
          @click-nav="onNavTap"
          @click-item="onConfirm"
        />
      </van-popup>
      <div :class="[active === 0 ? 'release-btn__fixed' : 'release-btn__default']" @click="active ? _uploadImg() : _uploadVideo()">
        <van-button type="default" block>确认发布</van-button>
      </div>
    </div>
</template>

<script>
export default {
    name: 'release',
    data () {
        return {
            imgList: [],
            videoList: [],
            title: '',
            message: '',
            categoryTitle: '请选择分类',
            showPicker: false,
            columns: [],
            videoData: null,
            categoryId: '',
            activeId: 1,
            activeIndex: 0,
            leftNavTitle: '',
            categoryList: [],
            active: 0,
            imgData: []
        }
    },
    created () {
        this._getCategory()
    },
    methods: {
        onConfirm (item) {
            this.categoryId = item.id
            this.categoryTitle = `${this.leftNavTitle ? this.leftNavTitle + '-' : ''}${item.text}`
            this.showPicker = false
        },
        onNavTap (index) {
            this.leftNavTitle = this.categoryList[index].children.length ? this.categoryList[index].name : ''
        },
        _getCategory () {
            this.$http.common.category().then(({ code, data }) => {
                if (code === 200) {
                    this.leftNavTitle = data[0].name
                    this.categoryList = data
                    this._handleCategory(data)
                }
            })
        },
        _handleCategory (data) {
            data.map((item, index) => {
                this.columns[index] = {
                    text: item.name,
                    children: []
                }
                if (item.children.length) {
                    item.children.map(item => {
                        this.columns[index].children.push({
                            text: item.name,
                            id: item.id
                        })
                    })
                } else {
                    this.columns[index].children.push({
                        text: item.name,
                        id: item.id
                    })
                }
            })
        },
        _uploadVideo () {
            if (!this.title) {
                return this.$toast.fail('请填写标题')
            }
            if (this.videoList.length === 0) {
                return this.$toast.fail('请上传视频')
            }
            if (!this.categoryId) {
                return this.$toast.fail('请选择分类')
            }
            this.$toast.loading({
                message: '视频上传中...',
                forbidClick: true,
                duration: 0
            })
            let _formData = new FormData()
            _formData.append('file', this.videoList[0].file)
            this.$http.common.uploadVideo(_formData).then(({ code, data }) => {
                if (code === 200) {
                    this.videoData = data
                    this._submitVideo()
                }
            })
        },
        _submitVideo () {
            this.$http.video.releaseVideo({
                category_id: this.categoryId,
                title: this.title,
                thumb: this.videoData.img_url,
                video_url: this.videoData.url
            }).then(({ code, msg }) => {
                if (code === 200) {
                    this.$toast.clear()
                    this.$toast.success(msg)
                    this.title = ''
                    this.videoList = []
                }
            })
        },
        _uploadImg () {
            if (!this.title) {
                return this.$toast.fail('请填写标题')
            }
            if (!this.message) {
                return this.$toast.fail('请输入文字')
            }
            if (!this.categoryId) {
                return this.$toast.fail('请选择分类')
            }
            this.$toast.loading({
                message: '发布中...',
                forbidClick: true,
                duration: 0
            })
            if (this.imgList.length === 0) {
                this._submitImg()
            } else {
                this._upload()
            }
        },
        _upload (index = 0) {
            let _formData = new FormData()
            _formData.append('file', this.imgList[index].file)
            this.$http.common.uploadImg(_formData).then(({ code, data }) => {
                if (code === 200) {
                    this.imgData.push(data)
                    if (this.imgList.length > index + 1) {
                        this._upload(index + 1)
                    } else {
                        this._submitImg()
                    }
                }
            })
        },
        _submitImg () {
            this.$http.article.create({
                category_id: this.categoryId,
                type: this.imgList.length ? 1 : 2,
                title: this.title,
                content: this.message,
                images: this.imgData.map(item => item.img_url)
            }).then(({ code, msg }) => {
                if (code === 200) {
                    this.$toast.clear()
                    this.$toast.success(msg)
                    this.title = ''
                    this.message = ''
                    if (this.imgList.length) this.imgList = []
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.release {
  padding-top: 16px;
  padding-bottom: 50px;
  &-video {
    margin: 16px 0 16px;
    background-color: #ffffff;
    &__upload {
      padding: 16px;
    }
  }
  &-btn {
    &__default {
      padding: 16px;
    }
    &__fixed {
      position: fixed;
      bottom: 66px;
      left: 16px;
      right: 16px;
    }
  }
  &-img {
    margin: 16px 0;
    padding: 0 16px;
    background-color: #ffffff;
    overflow: hidden;
    .release-img {
      overflow: initial;
      padding: 0;
    }
  }
  &-text {
    margin: 16px 0;
    padding: 0 16px;
    background-color: #ffffff;
    overflow: hidden;
    .van-cell {
      padding: 0 0 16px;
    }
  }
}
</style>
